<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form :form="form" layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="24">
            <a-form-item label="姓名">
              <a-input placeholder="请输入姓名" v-decorator="['name',{}]"></a-input>
            </a-form-item>
          </a-col>


          <a-col :md="6" :sm="24">
            <a-form-item label="性别">
              <!--<a-input placeholder="请输入姓名" v-model="name"></a-input>-->
              <!--              <j-dict-select-tag @change="change($event,'sex')" :value="sex" :triggerChange="true"-->
              <!--                                 dictCode="sex"/>-->
              <j-dict-select-tag v-decorator="['sex',{}]" placeholder="请选择性别" :triggerChange="true"
                                 dictCode="sex"/>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="8">
            <a-form-item
              label="下次何时联系"
            >
              <a-date-picker showTime format="YYYY-MM-DD" v-model="nextTime"/>
            </a-form-item>
          </a-col>


          <a-col :md="6" :sm="24">
            <a-form-item label="手机号码">
              <a-input placeholder="请输入手机号码" v-decorator="['phone',{}]"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item label="微信">
              <a-input placeholder="请输入微信" v-decorator="['wechat',{}]"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item label="意向级别">
              <!--              <j-dict-select-tag @change="change($event,'likeLevel')" :value="likeLevel" :triggerChange="true"-->
              <!--                                 dictCode="xc_like_level"/>-->

              <j-dict-select-tag placeholder="请选择意向级别" v-decorator="['likeLevel',{}]" :triggerChange="true"
                                 dictCode="xc_like_level"/>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item label="名单来源">
              <a-input placeholder="请输入名单来源" v-decorator="['customerFrom',{}]"></a-input>
            </a-form-item>
          </a-col>


          <a-col :md="6" :sm="24">
            <a-form-item label="老师姓名">
              <a-input placeholder="请输入老师姓名" v-decorator="['teacherName',{}]"></a-input>
            </a-form-item>
          </a-col>


          <!--<a-col :md="6" :sm="24">-->
          <!--<a-form-item label="是否报名">-->
          <!--<j-dict-select-tag @change="change($event,'isApplyed')" :value="isApplyed"  :triggerChange="true"-->
          <!--dictCode="xc_yes_no"/>-->
          <!--</a-form-item>-->
          <!--</a-col>-->


          <a-col :md="6" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">刷新</a-button>
            </span>
          </a-col>


        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button v-has="'show:意向客户:导出'" type="primary" icon="download" @click="handleExportXls('意向客户')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
                @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <!--<a-dropdown v-if="selectedRowKeys.length > 0">-->
      <!--<a-menu slot="overlay">-->
      <!--<a-menu-item key="1" @click="batchDel">-->
      <!--<a-icon type="delete"/>-->
      <!--删除-->
      <!--</a-menu-item>-->
      <!--</a-menu>-->
      <!--<a-button style="margin-left: 8px"> 批量操作-->
      <!--<a-icon type="down"/>-->
      <!--</a-button>-->
      <!--</a-dropdown>-->
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>
        <span>已选择</span>
        <a style="font-weight: 600">
          {{ selectedRowKeys.length }}
        </a>
        <span>项</span>
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        :scroll="{ x: 1100 }"
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:type}"
        @change="handleTableChange"
        :customRow="clickThenCheck">

         <span slot="remark" slot-scope="text,record">
<!--          <j-ellipsis :value="text"/>-->
            <a @click="handleDetail(record)">查看</a>
        </span>

        <span slot="action" slot-scope="text, record">

          <a-popconfirm title="确定报名吗?" @confirm="() => baoming(record)">
            <a v-if="record.isApplyed=='2'">报名</a>
            <a v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
          </a-popconfirm>


           <a-divider type="vertical"/>

          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" v-has="'show:意向客户'"/>

          <a-popconfirm v-has="'show:意向客户'" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="跟进记录" :key="refKeys[0]" :forceRender="true">
        <customerAttention-List ref="CustomerAttentionList"></customerAttention-List>
      </a-tab-pane>
    </a-tabs>

    <!-- 表单区域 -->
    <customer-modal ref="modalForm" @ok="modalFormOk"/>
    <student-modal ref="studentModal" @ok="studentModalOk"></student-modal>
  </a-card>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import CustomerModal from './modules/CustomerModal'
  import StudentModal from '@views/xuecheng/student/modules/StudentModal'
  import { deleteAction, httpAction, getAction, putAction } from '@/api/manage'
  import CustomerAttentionList from './CustomerAttentionList'
  import CustomerAttentionModal from './modules/CustomerAttentionModal'
  import JEllipsis from '@/components/jeecg/JEllipsis'

  export default {
    name: 'CustomerList',
    mixins: [JeecgListMixin],
    components: {
      CustomerModal,
      CustomerAttentionModal,
      CustomerAttentionList,
      StudentModal,
      JEllipsis
    },
    data() {
      return {
        form: this.$form.createForm(this),
        nextTime: '',
        refKeys: ['customerAttention'],
        description: '意向客户管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },

          {
            title: '姓名',
            align: 'center',
            width: 60,
            dataIndex: 'name'

          },
          {
            title: '性别',
            align: 'center',
            width: 60,
            dataIndex: 'sex_dictText'
          },
          {
            title: '手机号码',
            align: 'center',
            width: 100,
            dataIndex: 'phone'
          },
          {
            title: '微信',
            align: 'center',
            width: 100,
            dataIndex: 'wechat'
          },
          {
            title: '学历',
            align: 'center',
            width: 80,
            dataIndex: 'edu_dictText'
          },
          {
            title: '意向级别',
            align: 'center',
            width: 100,
            dataIndex: 'likeLevel_dictText'
          },
          {
            title: '创建时间',
            align: 'center',
            width: 100,
            dataIndex: 'createTime'
          },
          {
            title: '名单来源',
            width: 100,
            align: 'center',
            dataIndex: 'customerFrom'
          },
          {
            title: '老师姓名',
            align: 'center',
            width: 100,
            dataIndex: 'teacherName'
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'remark',
            width: 120,
            scopedSlots: { customRender: 'remark' }
          },
          // {
          //   title: '是否报名',
          //   align: 'center',
          //   dataIndex: 'isApplyed_dictText'
          // },

          {
            title: '操作',
            dataIndex: 'action',
            width: 120,
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],

        //操作url
        type: 'radio',
        url: {
          edit: '/customer/customer/edit',
          list: '/customer/customer/list',
          delete: '/customer/customer/delete',
          deleteBatch: '/customer/customer/deleteBatch',
          exportXlsUrl: 'customer/customer/exportXls',
          importExcelUrl: 'customer/customer/importExcel'
        },
        name: '',
        sex: '',
        phone: '',
        wechat: '',
        likeLevel: '',
        isApplyed: '',
        record: '',
        isorter: {
          column: 'isApplyed,createTime',
          order: 'desc'
        }
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    mounted() {

    },
    methods: {
      searchReset() {
        this.queryParam = {}
        this.nextTime=""
        this.form.resetFields()
        this.loadData(1)
      },
      change(value, text) {
        if (text === 'sex') {
          this.sex = value
        } else if (text === 'likeLevel') {
          this.likeLevel = value
        } else if (text === 'isApplyed') {
          this.isApplyed = value
        }
      },
      studentModalOk() {
        let formData = this.record
        // 设置为已报名
        formData.isApplyed = '1'
        let httpurl = this.url.edit
        let method = ''
        let that = this
        putAction(httpurl, formData).then(res => {
          this.record = ''
          that.loadData(1)
        })
      },
      baoming(record) {
        let that = this

        if (record.isApplyed === '1') {
          this.$message.warn('不能重复报名！')
        } else {
          this.record = record
          let model = {
            'name': record.name,
            'sex': record.sex,
            'cardId': '',
            'batch': '',
            'newSchool': '',
            'oldEdu': '',
            'oldSchool': '',
            'oldMajor': '',
            'oldGradute': '',
            'politics': '',
            'createName': '',
            'remark': '',
            'eduStatus': '1',
            'email': '',
            'phone': record.phone,
            'recommendPeople': '',
            'wechat': record.wechat,
            'updateName': ''
          }
          this.$refs.studentModal.edit(model)
          this.$refs.studentModal.title = '报名'
        }

        // this.$refs.studentModal.queryPa()


        // httpAction(httpurl, formData, method).then((res) => {
        //   if (res.success) {
        //     that.$message.success("报名成功");
        //     // that.$emit('ok');
        //   } else {
        //     that.$message.warning("报名失败！");
        //   }
        // }).finally(() => {
        //   // that.confirmLoading = false;
        //   // that.close();
        // })
      },

      clickThenCheck(record) {
        return {
          on: {
            click: () => {
              this.onSelectChange(record.id.split(','), [record])
            }
          }
        }
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectionRows = selectionRows
        this.$refs.CustomerAttentionList.getMain(this.selectedRowKeys[0])
      },
      onClearSelected() {
        this.selectedRowKeys = []
        this.selectionRows = []
        this.$refs.CustomerAttentionList.queryParam.mainId = null
        this.$refs.CustomerAttentionList.loadData()
        this.$refs.CustomerAttentionList.selectedRowKeys = []
        this.$refs.CustomerAttentionList.selectionRows = []
      },

      handleDelete: function(id) {
        var that = this
        deleteAction(that.url.delete, { id: id }).then((res) => {
          if (res.success) {
            that.$message.success(res.message)
            that.loadData()
            that.$refs.CustomerAttentionList.queryParam.mainId = null
            that.$refs.CustomerAttentionList.loadData()
          } else {
            that.$message.warning(res.message)
          }
        })
      },
      searchQuery: function() {
        this.selectedRowKeys = []
        this.selectionRows = []
        this.$refs.CustomerAttentionList.queryParam.mainId = null
        this.$refs.CustomerAttentionList.loadData()
        this.$refs.CustomerAttentionList.selectedRowKeys = []
        this.$refs.CustomerAttentionList.selectionRows = []


        this.setQueryParams()

        this.loadData()
      },
      setQueryParams() {
        console.log(this.form.getFieldValue('name'))
        this.queryParam.name = this.form.getFieldValue('name')
        this.queryParam.sex = this.form.getFieldValue('sex')
        this.queryParam.phone = this.form.getFieldValue('phone')
        this.queryParam.wechat = this.form.getFieldValue('wechat')
        this.queryParam.likeLevel = this.form.getFieldValue('likeLevel')
        this.queryParam.nextTime = this.nextTime ? this.nextTime.format('YYYY-MM-DD') : null
        this.queryParam.customerFrom = this.form.getFieldValue('customerFrom')
        this.queryParam.teacherName = this.form.getFieldValue('teacherName')

      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>